<template>
  <div class="flight-scene-container">
    <div></div>
    <h2 class="title">选择飞行场景</h2>
    <p class="desc">选择不同的飞行环境进行训练，每个场景都有独特的挑战和学习目标</p>
    <div class="scene-list">
      <el-row :gutter="29">
        <el-col v-for="(scene, index) in sceneList" :key="index" :span="10" class="card-container">
          <el-card class="scene-card">
            <template #header>
              <div class="card-header">
                <span>{{ scene.title }}</span>
                <span class="sub-title">{{ scene.type }}</span>
              </div>
            </template>
            <img :src="scene.image" alt="scene" class="scene-image" height="300px" width="450px"/>
            <div class="scene-desc">{{ scene.desc }}</div>
            <a href="flight://">
              <el-button class="start-btn" type="primary">开始飞行训练</el-button>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<style>
h2 {
  padding-top: 10px;
  text-align: center;
}

.card-container, p {
  margin: 10px;

}

p {
  padding-left: 9px;
  color: #333;
}

.scene-desc {
  padding-bottom: 5px;
  color: #333;
  font-size: 12px;
}


</style>

<script>

import Adv from "@/views/adv/adv/index.vue";

export default {
  name: "SaleContract",
  components: {Adv},

  data() {

    return {
      sceneList: [

        {
          title: '森林巡检',
          type: '森林',
          image: require("@/assets/scene/森林.png"), // 实际替换成森林场景图链接
          desc: '在茂密的森林环境中进行无人机巡检训练，适合练习低空飞行和障碍物规避'
        },
        {
          title: '海域救援',
          type: '海域',
          image: require("@/assets/scene/海域.jpg"), // 实际替换成海域场景图链接
          desc: '海上搜救任务模拟，训练海洋环境下的飞行技能和应急处理能力'
        },
        {
          title: '雪山测绘',
          type: '雪山',
          image: require("@/assets/scene/雪山.jpg"), // 实际替换成雪山场景图链接
          desc: '高海拔雪山地形测绘，练习复杂地形条件下的精确飞行控制'
        },
        {
          title: '城市监控',
          type: '城市',
          image: require("@/assets/scene/城市.jpg"), // 实际替换成城市场景图链接
          desc: '城市环境下的监控巡逻任务，训练在复杂建筑群中的飞行技能'
        }
      ]

    };
  },
  created() {

  },

  methods: {}
};

</script>
